<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/Lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<title></title>
		<style type="text/css">
			html,body {
				margin: 0;
				height: 100%;
				width: 100%;
			}
			#buy {
				height: 100%;
				display: flex;
				flex-direction: column;
				background-color: #eee;
			}
			header {
				height: 50px;
				line-height: 50px;
				width: 100%;
				background: red;
			}
			section {
				width: 100%;
				height: 100%;
				overflow-y: scroll;
				background: white;
			}
			.card-goods {
				padding: 10px 0;
				background-color: #fff;
			}
			.card-goods__item {
				position: relative;
				background-color: #fafafa;
			}
			.card-goods__item .van-checkbox__label {
				width: 100%;
				height: auto;
				padding: 0 10px 0 15px;
				box-sizing: border-box;
			}
			.card-goods__item .van-checkbox__icon {
				top: 50%;
				left: 10px;
				z-index: 1;
				position: absolute;
				margin-top: -10px;
			}
			.card-goods__item .van-card__price {
				color: #f44;
			}
			.van-swipe-cell__right{
				background-color: red;
				width: 80px;
				color: white;
			}
		</style>
	</head>
	<body><div id="buy">
			<header style="background: red;color: white;">
				<van-col span="3">
					&nbsp;
				</van-col>
				<van-col span="18" style="text-align: center;font-size: 18px;">
					购物车
				</van-col>
			</header>
			<section >
				<van-checkbox-group class="card-goods" v-model="checkedGoods"  v-for="item in goods" v-show="allGood">
					<van-swipe-cell :right-width="80">
						<van-checkbox :label-disabled="true" class="card-goods__item" :key="item.Id" :name="item.Id">
							<van-card :title="item.Name" :price="item.RealPrice">
								<div slot="num">
									<van-stepper :integer="true" disable-input="true" v-model="item.num" />
								</div>
								<img :src="item.CoverImage" slot="thumb" onerror="javascript:this.src='../img/insert.png';onerror=null; " @click="GetId(item.Id)"/>
							</van-card>
						</van-checkbox>
						<span slot="right" @click="Delete(item.Id)" style="line-height: 100px;position: relative;left:10px; ">删除商品</span>
					</van-swipe-cell>
				</van-checkbox-group>
				<div style="height: 56px;"></div>
				<van-submit-bar :price="totalPrice" :disabled="!checkedGoods.length||!status" :button-text="submitBarText" @submit="onSubmit">
					 <van-checkbox @click="checkAll" style="padding-left: 15px;" v-model="checkedGood">全选</van-checkbox>
				</van-submit-bar>
				<div style="width: 100%;height:100%" v-show="icon">
					<div style="color:#AAAAAA;font-size: 24px;width: 100%;text-align: center;margin-top:30% ;">
						<div><van-icon name="shopping-cart-o" color="#AAAAAA" size="56px"></van-icon></div>
						购物车空空如也
					</div>
				</div>
			</section>
		</div> 
		<script>
			Vue.use(VueLazyload, {
				error: "../../img/insert.jpg"
			});
			var vm = new Vue({
				el: "#buy",
				data: {
					checkedGoods: [],
					temp:[],
					goods: [],
					checkedGood:false,
					allGood:true,
					icon:true,
					status:true,
				},
				mounted: function() {
					var _this=this;

					if(localStorage.getItem("name")!=null){
						_this.name=localStorage.getItem("name");
					}
					else{
						_this.$dialog.confirm({
						  title: '提示',
						  message: '还未登陆，是否去登陆',
						  confirmButtonText:"登陆"
						}).then(() => {
						  // on confirm
						  plus.webview.create("../views/Person-views/login.html","login");
						  plus.webview.show("login");
						}).catch(() => {
						  // on cancel
							plus.webview.currentWebview().reload(false);
							plus.webview.show("Main");
							sessionStorage['active']= 0;
							plus.webview.all()[0].reload(false);
						});
					}
					for(var i = 1;i<12;i++){
						if(localStorage.getItem(i)){
							_this.goods.push(JSON.parse(localStorage.getItem(i)));
// 							console.log(JSON.parse(localStorage.getItem(i)));
// 							console.log(_this.goods.length);
							_this.temp.push(JSON.parse(localStorage.getItem(i)).Id);
						}
					}
					if(_this.goods.length==0){
						_this.icon=true;
						_this.allGood=false;
					}else{
						_this.allGood = true;
						_this.icon = false;
					}
				},
				watch:{					
					checkedGoods:function(newVal,oldVal){
						if(newVal==this.temp){//temp存储id
							this.checkedGood=true;
						}else{
							this.checkedGood=false;
						}
					}
				},
				computed:{
					submitBarText:function() {
						const count = this.checkedGoods.length;
						return '结算' + (count ? `(${count})` : '');
					},
					totalPrice:function() {
						var _this=this;
						var money = 0;
						for (var i = 0; i < _this.goods.length; i++) {
							for(var x = 0;x< _this.checkedGoods.length;x++){
								if (_this.goods[i].Id==_this.checkedGoods[x]) {
									money += (_this.goods[i].RealPrice * _this.goods[i].num);
								}
							}
						}
						return money*100;
					}
				},
				methods: {
					GetId:function(id){
						console.log(id);
						var w=plus.webview.create("../views/Goodsdetail.html","Goodsdetail",{},{Id:id});
						plus.webview.show("Goodsdetail");
						
					},
					checkAll:function(){
						if(!this.checkedGood){
							this.checkedGoods=[];
						}else{
							for(var i=0;i<this.goods.length;i++){
								this.temp[i] = this.goods[i].Id;
								
							}
							this.checkedGoods=this.temp;
						}
					},					
					onSubmit:function() {
						var _this=this;
						var arr = [];
						for(var i=0;i<_this.goods.length;i++){
							if(_this.checkedGoods.lastIndexOf(_this.goods[i].Id)!=-1){
								arr.push(_this.goods[i]);
							}
						};
						var price=_this.totalPrice/100;
						plus.webview.create("./Shopping_view/pay.html",'pay',{},{pids:arr,price:price});
						plus.webview.show("pay");
					},
					Delete(i){
						var _this=this;
						// console.log(this.checkedGoods[0]);
						this.$dialog.confirm({
							message:"确认删除商品"
						}).then(() => {
							localStorage.removeItem(i);
							_this.goods.splice(_this.goods.map(item => item.Id).lastIndexOf(i),1);
						}).catch(() => {
							// on cancel
						});
					},
					onRefresh(){
						ajax({
							type:"post",
							url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType:"JSON",
							success:function(res){
								// console.log(res.Data);
								vm.Goods=res.Data;
							}
						});
						 setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						  }, 500);
					}
				}
			});
		</script>
	</body>
</html>